<template>
	<div class="flex items-center mb-20px">

		<el-popover placement="bottom-start" :width="400" trigger="click" popper-class="spot-popper-class-top">
			<template #reference>
				<div class="flex items-center cursor-pointer">
					<img src="/transaction/spot/change-white.svg" class="w-16px h-16px" />
					<p class="ml-6px">
						{{ topData.coin }}
					</p>
					<img src="/transaction/spot/collect-grey.svg" class="w-11px h-11px ml-10px cursor-pointer" />
				</div>
			</template>
			<template #default>
				<div>
					<!-- 搜索框 -->
					<div class="pt-16px pl-16px pr-16px ">
						<el-input v-model="searchInput" style="width: 100%;height:38px;" placeholder="搜索交易对"
							prefix-icon="Search" />
					</div>
					<!-- tabs -->
					<div>
						<el-tabs class="tabs-spot-choose-coin" v-model="activeName">
							<el-tab-pane label="自选" name="first">
								<div class="pl-16px pr-16px pb-16px">
									<TableChoose></TableChoose>
								</div>
							</el-tab-pane>
							<el-tab-pane label="现货" name="second">
								<div class="pl-16px pr-16px pb-16px">
									<TableChoose></TableChoose>
								</div>
							</el-tab-pane>
							<el-tab-pane label="合约" name="third">
								<div class="pl-16px pr-16px pb-16px">
									<TableChoose></TableChoose>
								</div>
							</el-tab-pane>
						</el-tabs>
					</div>
				</div>
			</template>
		</el-popover>
		<div class="ml-40px text-14px" :class="{ 'text-#07B175': topData.up, 'text-#F34E5F': !topData.up }">
			<p class="mb-6px">{{ topData.price }}</p>
			<p class="text-12px">{{ topData.up ? '+' : '-' }}{{ topData.rate }}%</p>
		</div>
		<div class="ml-40px text-12px">
			<p class="mb-6px text-#B5B5B5 ">24H最高</p>
			<p>{{ topData.maxPrice }}</p>
		</div>
		<div class="ml-40px text-12px">
			<p class="mb-6px text-#B5B5B5 ">24H最高</p>
			<p>{{ topData.maxPrice }}</p>
		</div>
		<div class="ml-40px text-12px">
			<p class="mb-6px text-#B5B5B5 ">24H成交量</p>
			<p>{{ topData.turnover }}</p>
		</div>
		<div class="ml-40px text-12px">
			<p class="mb-6px text-#B5B5B5 ">24H成交额（USDT）</p>
			<p>{{ topData.volume }}</p>
		</div>
	</div>
</template>
<script lang="ts" setup>
import TableChoose from './TableChoose.vue';
import { ref } from 'vue';

const activeName = ref<any>('first');
const topData = ref<any>({
	coin: 'BTC/USDT',
	price: '95189.7',
	rate: '1.25',
	up: true,
	maxPrice: '95336.8',
	minPrice: '1725.23',
	turnover: '1725.23',
	volume: '1725.23'
})

const searchInput = ref<any>('');
</script>
<style lang="scss" scoped>
::v-deep .el-input__wrapper {
	background-color: #181A20;
	font-size: 14px;
}
</style>
<style lang="scss">
.spot-popper-class-top {
	border: 0px !important;
	padding: 0 !important;
	background-color: #181A20 !important;

	.el-popper__arrow {
		display: none;
	}
}

.tabs-spot-choose-coin {
	.el-tabs__header{
		margin-bottom: 10px;
	}
	.el-tabs__nav-wrap:after {
		background-color:#B5B5B5;
	}
	.el-tabs__nav-scroll {
		padding: 0px 16px 0 16px;

		.is-top {
			color:#B5B5B5;
		}

		.is-active {
			color: #fff;
		}
	}
}
</style>
